<template>
  <view class="container">
    <!-- 省份 -->
    <scroll-view scroll-y="true" style="width: 40%; height: 100vh; background-color: #fff">
      <view :class="{ item: true, common: provinceidnex == index }" v-for="(item, index) in province" @click="provinceidnex = index" :key="item.id">{{ item.name }}</view>
    </scroll-view>
    <!-- 城市 -->
    <scroll-view scroll-y="true" style="width: 60%; height: 100vh; background-color: #fff">
      <view :class="{ item: true, common: cityindex == index }" v-for="(item, index) in city[0].children" @click="goindex(item, index)" :key="item.id">
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      province: [], // 省份
      provinceidnex: 0,
      cityindex: null
    };
  },
  computed: {
    city() {
      return this.province.filter((item) => {
        return item.name == this.province[this.provinceidnex].name;
      });
    }
  },
  onLoad() {
    this.getcitylist();
  },
  methods: {
    goindex(item, index) {
      console.log('当前的城市', item);
      this.cityindex = index;
      uni.setStorageSync('currentcity', item.name);
      uni.setStorageSync('cityid', item.id);
      uni.redirectTo({
        url: '/pages/index/index'
      });
    },
    // 获取城市列表
    async getcitylist() {
      const res = await this.http('/group/getCityList');
      this.province = res.data;
      console.log('城市列表', this.province);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  display: flex;
  .item {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #000;
  }
  .common {
    background-color: #ebebeb;
    font-weight: blod;
    color: #000;
    font-size: 36rpx;
  }
}
</style>
